<template>
	<view>
		<view class="top">
			<view class="flex align-center">
				<view class="img">
					<image src="/static/images/jing/avatar.png" style="width: 100%;height: 100%;border-radius: 50%;"></image>
				</view>
				<view class="name">没有名字</view>
			</view>
		</view>
		
		<view class="flex align-center justify-between p-3 bg-white">
			<view class="flex align-center flex-column justify-center" @tap="jump(item.url, { type: item.type })" v-for="(item,index) in orderCategory" :key="index">
				<view class="order-img">
					<image :src="item.img" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="order-title">{{item.title}}</view>
			</view>
		</view>
		
		<view class="flex align-center p-3 bg-white mt-2">
			<view class="flex align-center flex-column justify-center" style="margin-right: 58rpx;" @tap="jump('/pages/user/hospital')">
				<view class="order-img">
					<image src="/static/images/hospital.png" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="order-title">医院信息</view>
			</view>
			<view class="ser-son" style="margin-right: 58rpx;">
				<button open-type="contact">
					<view class="order-img" style="margin: 0 auto;">
						<image src="/static/images/yue.png" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="order-title">在线预约</view>
				</button>
			</view>
			<view class="flex align-center flex-column justify-center" @tap="jump('/pages/user/complaints')" style="margin-right: 58rpx;">
				<view class="order-img">
					<image src="/static/images/medical.png" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="order-title">在线投诉</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	export default{
		data(){
			return{
				orderCategory:[
					{
						img:'/static/images/all.png',
						url:'/pages/order/list',
						title:'全部订单',
						type:'all'
					},
					{
						img:'/static/images/dai.png',
						url:'/pages/order/list',
						title:'待支付',
						type:'nopay'
					},
					{
						img:'/static/images/wei.png',
						url:'/pages/order/list',
						title:'未使用',
						type:'noget'
					},
					{
						img:'/static/images/used.png',
						url:'/pages/order/list',
						title:'已使用',
						type:'nocomment'
					},
					{
						img:'/static/images/juan.png',
						url:'/pages/user/coupon',
						title:'卡卷中心',
						type:''
					}
				],
				
			}
		},
		methods:{
			jump(path, query) {
				this.$Router.push({
					path: path,
					query: query
				});
			}
		}
	}
</script>

<style scoped>
	.top{
		background-image: url("");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding: 95rpx 47rpx 101rpx 47rpx;
	}
	.img{
		width: 134rpx;
		height: 134rpx;
		border-radius: 50%;
	}
	.name{
		color: #ffffff;
		font-size: 26rpx;
		font-weight: 500;
		margin-left: 21rpx;
	}
	.order-img{
		width: 60rpx;
		height: 60rpx;
	}
	.order-title{
		color: #656565;
		font-size: 28rpx;
		font-weight: 500;
		margin-top: 20rpx;
	}
	.ser-son button::after {
		border: none;
	}
	
	.ser-son button {
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		line-height: 1.4;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		color: #000000;
		background-color: #fff;
		width: 100%;
		height: 100%;
		
	}
</style>